<template>
    <div id="body">
        <div id="hovermenu" :class="[obj.tabShow?'hover1':'hover2','flex-column-center']">
            <div id="header"><a href="/main"><img class="logo" src="../assets/icon/logo.png"/></a></div>
            <div id="menu">
                <span class="item flex-column-center" :class="{'selected':!m.showhid}" @click="toMenu(m,i)" v-for="(m,i) in obj.menu" :key="m">
                    <img class="tabicon" :src="`/imgs/${m.icon}${!m.showhid?'':'_'}.png`"/>
                    <span class="tablabel">{{ m.label }}</span>
                </span>
                <div class="flex-column-center descbox">
                    <span>严守保密规定</span>
                    <span>严禁上传</span>
                    <span>涉密文件</span>
                    <span>上传信息</span>
                    <span>脱密处理</span>
                </div>
            </div>
            <!-- <div class="wline"></div> -->
            <div id="bottom">
                <span class="flex-center"><a @click="logout"><img class="tabicon" :src="`/imgs/11.png`"/></a></span>
            </div>
        </div>
        <div id="left">
            <div class="m_header"></div>
        </div>
        <div id="right">
            <div id="header" class="flex-row-center">
                <div class="flex-column flex1 pd30">
                    <div class="systitle">宣传思想文化工作全流程管理系统</div>
                    <span class="metatitle">{{proxy.$route.meta.title}}</span>
                </div>
                <el-dropdown ref="dropdown1" trigger="contextmenu">
                    <span @click="showtab" class="flex-row-center pointer weight">
                        <div class="username flex-row-center pr10">
                            <img class="userhead" src="../assets/icon/user.png"/>
                            <span style="margin-left: 45px;">{{ obj.u.name||'未知用户' }}</span>
                            <ArrowDownBold style="width: 12px;margin-left:2px;" />
                        </div>

                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="obj.editpass.show = true">修改密码</el-dropdown-item>
                            <el-dropdown-item @click="backup">一键备份</el-dropdown-item>
                            <el-dropdown-item @click="reduction"><Upfile buttontext="一键还原"  @upload="reduction" type="text" :accept="['application/zip','application/x-zip-compressed']" :maxsize="1024 * 1024 * 100" /></el-dropdown-item>
                            
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
            <div id="submenu" v-if="obj.submenu.length > 0">
                <a @click="toPage(sm)" :class="{'selected':sm.selected}" v-for="sm in obj.submenu" :key="sm">{{sm.label}}</a>
            </div>
            <div id="subbody" v-if="obj.submenu.length > 0">
                <router-view v-slot="{ Component }">
                    <keep-alive>
                        <component :is="Component" v-if="$route.meta.keepAlive" :key="$route.path" />
                    </keep-alive>
                    <component :is="Component" v-if="!$route.meta.keepAlive"/>
                </router-view>
            </div>
            <Dashboard v-else />
        </div>
    </div>
    <el-dialog v-model="obj.editpass.show" title="修改密码" width="450px" draggable center destroy-on-close>
        <editPass @close="obj.editpass.show = false" />
    </el-dialog>
</template>

<script setup>
    import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
    import { onBeforeRouteUpdate } from 'vue-router';
    import { ArrowDownBold } from '@element-plus/icons-vue'
    import editPass from '@/pages/editpass.vue'
    import Dashboard from '@/pages/dashboard.vue'
    import Upfile from '@/components/upfile_single.vue'
    let { proxy } = getCurrentInstance()

    onBeforeRouteUpdate((to, from, next) => {
        const cururl = to.path.substring(1)
        if(cururl == "main") {
            obj.menu = []
            obj.submenu = []
            init()
        }else{
            obj.menu.map(e => {
                e.showhid= !(e.sub.find(ev=>{
                    if(ev.childs.includes(`/${cururl}`)){
                        obj.submenu = e.sub.filter(ev => ev.show)
                        ev.selected = true
                        return true
                    }else{
                        ev.selected = false
                    }
                }))
            })
            next()
        }
    });

    //存不住页面，就是这里的问题
    let cururl = proxy.$route.path.substring(1); //这个是当前路由proxy.$route，上面上路由列表router.currentRoute.value，两个不一样
    let obj = reactive({
        u: localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")):{},
        menu: [],
        submenu: [],
        editpass: { show: false },
        tabShow: false,
        nowlabel: ''
        
    });
    const dropdown1 = ref(null)

    onMounted(()=>{
        init()
    })

    let init = () => {
        let authority = proxy.$setting.globalData.authority||[]
        authority.forEach(m => {
            let subTmp=[]
            m.sub.forEach(t => {
                if(t.show && t.label){
                    subTmp.push(t)
                }
                t.sub.forEach(e => { //把子项提上来，它只需提三层即可
                    if(e.show && e.label){
                        e.component = t.component+'/'+e.component
                        subTmp.push(e)
                    }
                })
            })
            m.sub = subTmp
            m.show = m.sub.some(t => t.label) //这是用来判断，子项若没有，本项不显示
            m.showhid = !m.sub.some((v,i) => v.component == cururl) //返回bool，有一个满足即true
            if(!m.showhid){
                let ms = m.sub.filter(e => e.show);
                ms.forEach(e => e.selected = e.component == cururl)
                obj.submenu = ms
            }
        })
        obj.menu = authority.filter(t => t.show)
        // console.log(obj.menu)
        setUrlConfig()
    }

    const setUrlConfig=()=>{
        let i = obj.menu.findIndex(e => proxy.$route.path==`/${e.sub[0].component}`)
        if(i>-1){
            toMenu(obj.menu[i],i)
        }else{
            obj.menu.map(e => {
                e.showhid= !(e.sub.find(ev=>{
                    if(ev.childs.includes(proxy.$route.path)){
                        obj.submenu = e.sub.filter(ev => ev.show)
                        ev.selected = true
                        return true
                    }
                }))
            })
        }
    }

    let logout = () => {
        sessionStorage.clear()
        proxy.routerPushMixin("/")
    }
    let toMenu = (m,i) => {
        obj.nowlabel = m.label||''
        obj.submenu = m.sub.filter(e => e.show)
        proxy.routerPushMixin("/" + m.sub[0].component)
        obj.menu.forEach((t,n) => t.showhid = n!=i)
    }
    let toPage = e => {
        obj.submenu.forEach(t => t.selected = t.component == e.component)
        proxy.routerPushMixin("/"+e.component)
    }

    const showtab=()=>{
        if (!dropdown1.value) return
        dropdown1.value.handleOpen()
    }

    const backup=()=>{
        proxy.$ajax({
            url: '/manager/backup',
            data: {},
            bfLoading: true
        }).then(d => {
            if(d.success){
                window.open(`${proxy.$setting.globalUrl.fileurl}/backup/backup.zip`)
            }else{
                proxy.elMessageMixin(d.err||"备份失败", 'error') 
            }
        }).catch(e => {
            proxy.elMessageMixin("备份失败", 'error')
        })
    }

    const reduction=(filename)=>{
        proxy.$ajax({
            url: '/manager/recover',
            data: {filename:filename},
            bfLoading: true
        }).then(d => {
            if(d.success){
                proxy.elMessageMixin("还原成功", 'success') 
            }else{
                proxy.elMessageMixin(d.err||"备份失败", 'error') 
            }
        }).catch(e => {
            proxy.elMessageMixin("备份失败", 'error')
        })
    }
</script>

<style scoped lang="scss">
    #body { display: flex; overflow: hidden; height: 100%; background-color: $white-color;
        #hovermenu {
            position: fixed; left: 20px; top: 20px; height: 90vh; z-index: 9;
            min-width: 100px; border-radius: 20px; overflow-y: hidden; flex-direction: column; background: linear-gradient(to bottom, $start-color, $end-color); 
            animation-duration: 0.3s;
			animation-fill-mode: forwards;
            #header { font-size: 20px; height: 100px; display: flex; justify-content: center; align-items: center; box-sizing: border-box; 
                .logo{width: 50px; height: 50px;}
                a {
                    text-decoration: none; color: $font-color;
                    small { font-size: 12px; }
                }
            }
            .wline{width: 25%;height: 3px;background: rgba($gray-end-color,0.38);}
            #menu { flex: 1; width: 100%; overflow-y: auto; box-sizing: border-box; padding: 30px 10px 20px; display: flex; flex-direction: column; align-items: center;position: relative;overflow-y: auto;
                .item {
                    font-size: 14px; color: $font-color; display: flex; align-items: center; box-sizing: border-box; padding: 20px 12px; border-radius: 10px; cursor: pointer; margin-bottom: 20px;
                }
                .item.selected { background: rgba(255,255,255,0.1);}
                .item:hover { background: rgba(255,255,255,0.05);}
                .tabicon{width: 30px; height: 30px;}
                .tablabel{animation-duration: 0.4s;animation-fill-mode: forwards;font-size: 13px; font-weight: 400;margin-top: 8px;}
                .die{position: absolute;right: 0;top: 0;width: 30px;height: 30px;z-index: 1;cursor: pointer;opacity: 0.5;}
                .descbox{color: $font-color;font-weight: bold;line-height: 22px;}
            }
            #bottom { font-size: 14px;  color: $font-color; margin-top: 20px;
                span { display: flex; padding: 0 20px 20px 20px; border-bottom: 1px solid darken($end-color, 10%);
                    a { color: $font-color; cursor: pointer; img{width: 30px; height: 30px;}}
                }
                div { padding: 20px 0 5px 20px; opacity: .5; font-size: 12px;  }
            }
        }
        #left{
            min-width: 120px; height: 100vh;
            animation-duration: 0.3s;
			animation-fill-mode: forwards;
            .m_header{
                height: 100px; border-bottom: 2px solid $line-color; box-sizing: border-box;
            }
        }
        #right { display: flex; flex: 1; flex-direction: column; overflow: hidden; background-color: $white-color;
            #header { color: $start-color; font-size: 14px; height: 100px; display: flex; justify-content: flex-end; align-items: center; border-bottom: 2px solid $line-color; padding: 10px 10px 0 0; box-sizing: border-box;
                .systitle{font-size: 26px; font-weight: bold; color: #000;text-align: center;}
                .metatitle{font-size: 20px; font-weight: bold; color: #000;}
                span { padding-left: 5px; }
                .username{
                    position: relative;
                    min-width: 125px;
                    height: 30px;
                    background: #F4F4FA;
                    border-radius: 19px 19px 19px 19px;
                    .userhead{position: absolute; left: 0; top: 50%; margin-top: -20px; width: 40px;height:40px;}
                }
            }
            #submenu { z-index: 2; font-size: 14px; height: 60px; box-sizing: border-box; box-shadow: 0 10px 20px rgba(darken($line-color, 0%), 0.4); display: flex; align-items: flex-end; 
                a { cursor: pointer; color: $start-color; opacity: .6; padding: 0 25px 15px 25px; position: relative; }
                a.selected { opacity: 1; color: $end-color; font-weight: bold; }
                a.selected:after { content: ""; height: 2px; background-color: lighten($start-color, 30%); position: absolute; bottom: 0; left: 0; right: 0; box-shadow: 0 5px 10px rgba($start-color, 1); }
            }
            #subbody { flex: 1;box-sizing: border-box; overflow: hidden; position: relative; }
        }
        .hover1{animation-name: adm1;}
        .hover2{animation-name: adm2;}
        .left1{animation-name: l_adm1;}
        .left2{animation-name: l_adm2;}
        .tablabel1{animation-name: adm3;}
        .tablabel2{animation-name: adm4;}
    }
    /* @keyframes adm1{
		0%{width: 120px;}
		100%{width: 160px;}
	}
    @keyframes adm2{
		0%{width: 160px;}
		100%{width: 120px;}
	}
    @keyframes l_adm1{
		0%{width: 140px;}
		100%{width: 180px;}
	}
    @keyframes l_adm2{
		0%{width: 180px;}
		100%{width: 140px;}
	}
    @keyframes adm3{
		0%{display: none;}
		50%{display: none;}
		100%{display: inline;}
	}
    @keyframes adm4{
		0%{display: inline;}
		100%{display: none;}
	} */
</style>